<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>找回密码</title>
    <link rel="stylesheet" href="./css/index.css">
    <script src="../lib/jquery.js"></script>
</head>

<body>

    <div class="one">
        <div class="title">
            <span class="active"><i>1</i>输入找回账号</span>
            <span><i>2</i>回答密保问题</span>
            <span><i>3</i>重置密码</span>
        </div>
        <div class="box">
            <div class="input-item">
                <label>请输入手机号：</label>
                <input type="text" id="phone">
            </div>
            <button id="onenext">下一步</button>
        </div>

    </div>
    <!----------------------------------------------------->
    <br>
    <hr>
    <div class="two">
        <div class="title">
            <span><i>1</i>输入找回账号</span>
            <span class="active"><i>2</i>回答密保问题</span>
            <span><i>3</i>重置密码</span>
        </div>
        <div class="box">
            <div class="input-item">
                <label> 用户名：</label>
                <input type="text" value="xxxx" disabled id="uname">
            </div>
            <div class="input-item">
                <label> 手机号：</label>
                <input type="text" value="xxxx" disabled id="ophone">
            </div>
            <div class="input-item">
                <label>密保问题：</label>
                <input type="text" value="xxxxxxx" disabled id="questi">
            </div>
            <div class="input-item">
                <label>密保答案：</label>
                <input type="text" id="answer">
            </div>
            <button id="twoprev">上一步</button>
            <button id="twonext">下一步</button>
        </div>
    </div>
    <!----------------------------------------------------->
    <br>
    <hr>
    <div class="three">
        <div class="title">
            <span><i>1</i>输入找回账号</span>
            <span><i>2</i>回答密保问题</span>
            <span class="active"><i>3</i>重置密码</span>
        </div>
        <div class="box">
            <div class="input-item">
                <label>请输入新密码：</label>
                <input type="text" id="newpaw">
            </div>
            <button id="threeprev">上一步</button>
            <button id="reset">立即重置</button>
        </div>
    </div>

</body>
<script src="../lib/axios.js"></script>

<script>

    const phone = document.querySelector('#phone')
    const answer = document.querySelector('#answer')
    const one = document.querySelector('.one')
    const two = document.querySelector('.two')
    const three = document.querySelector('.three')

    two.style.display = 'none'
    three.style.display = 'none'

    axios.defaults.baseURL = 'http://124.223.14.236:3001/api'

    let id;
    //第一个盒子
    const onenext = document.querySelector('#onenext')
    onenext.addEventListener('click', async function () {
        const { data } = await axios.get('user/findPwd', {
            params: {
                phone: phone.value.trim(),
            },
        })
        console.log(data);
        if (data.success) {
            two.style.display = 'block'
            one.style.display = 'none'
            //给input赋默认值
            phone.value = phone.value.trim()
            document.querySelector('#uname').value = data.data.username;
            document.querySelector('#ophone').value = data.data.phone;
            document.querySelector('#questi').value = data.data.question;
            // 拿到id，重置密码使用
            id = data.data.id;
        }
    })

    //第二个盒子
    const twoprev = document.querySelector('#twoprev')
    const twonext = document.querySelector('#twonext')
    twonext.addEventListener('click', async function () {
        three.style.display = 'block'
        two.style.display = 'none'
    })
    //第二个盒子的上一步
    twoprev.addEventListener('click', function () {
        one.style.display = 'block'
        two.style.display = 'none'
    })

    //重置密码
    const reset = document.querySelector('#reset')
    const newpaw = document.querySelector('#newpaw')
    reset.addEventListener('click', async function () {
        const { data: { success, msg } } = await axios.post('/user/resetPwd',
            {
                id: `${id}`,
                password: newpaw.value.trim(),
                answer: answer.value.trim()
            },
        )
        if (success) {
            alert(msg)
        }
        console.log(msg);
    })

    //第三个盒子的上一步，
    const threeprev = document.querySelector('#threeprev')
    threeprev.addEventListener('click', function () {
        two.style.display = 'block'
        three.style.display = 'none'
    })


</script>

</html>